<template>
  <div class="app-loading">
    <van-overlay :show="isShow">
      <div class="wrapper" >
        <van-loading :type="type" :color="color" :size="size">{{message}}</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import { Dialog } from 'vant';
@Component({
    components: {}
})
export default class AppLoading extends Vue {
    /**
     * 是否展示
     *
     * @type {boolean}
     * @memberof AppModal
     */
    public isShow: boolean = false;

    /**
     * 加载显示文字信息
     *
     * @type {string}
     * @memberof AppLoading
     */
    @Prop({default :'加载中...'}) public message?: string;

    /**
     * 加载颜色
     *
     * @type {string}
     * @memberof AppLoading
     */
    @Prop({default :'#eff2f5'}) public color?: string;

    /**
     * 加载类型
     *
     * @type {string}
     * @memberof AppLoading
     */
    @Prop({default :'spinner'}) public type?: string;

    /**
     * 加载大小
     *
     * @type {string}
     * @memberof AppLoading
     */
    @Prop({default :'30px'}) public size?: string;

    /**
     * 显示
     *
     * @memberof AppLoading
     */
    public start() {
         this.isShow = true;
    }

    /**
     * 隐藏
     *
     * @memberof AppLoading
     */
    public end(item?: any) {
        document.body.removeChild(this.$el);
        this.$destroy();
    }


}
</script>
<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
